<template>
  <el-form class="form color" ref="formRef" label-width="150" label-position="top" :model="dataForm" :rules="dataRule">
    <el-form-item v-for="(item, index) in formItemList" :key="index" :label="item.name" :prop="item.title">
      <el-row :gutter="20">
        <el-col :span="12">
          <!-- 单行输入项 -->
          <el-input
            v-if="item.type == 'text'"
            v-model="dataForm[item.title]"
            :clearable="true"
            show-word-limit
            :maxlength="item.rule"
            @input="handleValue">
          </el-input>

          <!-- 数字输入项 -->
          <el-input-number
            v-else-if="item.type == 'number'"
            v-model="dataForm[item.title]"
            @input="handleValue">
          </el-input-number>

          <!-- 金额输入项 -->
          <el-input-number
            v-else-if="item.type == 'money'"
            v-model="dataForm[item.title]"
            :min="0"
            :precision="2"
            :step="0.01"
            @input="handleValue">
          </el-input-number>

          <!-- 天数输入项 -->
          <el-input-number
            v-else-if="item.type == 'day'"
            v-model="dataForm[item.title]"
            @input="handleValue"
            :min="1"
            :max="31"
            :label="item.content">
          </el-input-number>

          <!-- 百分百数字输入项 -->
          <el-input
            v-else-if="item.type == 'percent'"
            type="number"
            v-model="dataForm[item.title]"
            @input="handleValue">
            <template v-slot:append>%</template>
          </el-input>

          <!-- 密码输入项 -->
          <el-input
            v-else-if="item.type == 'password'"
            type="password"
            v-model="dataForm[item.title]"
            @input="handleValue">
          </el-input>

          <!-- 多行输入项 -->
          <el-input
            v-else-if="item.type == 'textarea'"
            type="textarea"
            show-word-limit
            :maxlength="item.rule"
            :rows="5"
            v-model="dataForm[item.title]"
            :clearable="true"
            @input="handleValue">
          </el-input>

          <!-- 单选输入项 -->
          <el-radio-group
            v-else-if="item.type == 'radio'"
            v-model="dataForm[item.title]"
            @input="handleValue">
            <el-radio v-for="(v, k) in item.params" :key="k" :label="v.value">
              {{ v.text }}
            </el-radio>
          </el-radio-group>

          <!-- 开关输入项 -->
          <el-switch
            v-else-if="item.type == 'switch'"
            v-model="dataForm[item.title]"
            :active-value="item.params.active_value"
            :inactive-value="item.params.inactive_value"
            :active-text="item.params.active_text"
            :inactive-text="item.params.inactive_text"
            @input="handleValue">
          </el-switch>

          <!-- 日期输入项 -->
          <el-date-picker
            v-else-if="item.type === 'date'"
            v-model="dataForm[item.title]"
            value-format="yyyy-MM-dd"
            @input="handleValue">
          </el-date-picker>

          <!-- 时间输入项 -->
          <el-time-select
            v-else-if="item.type === 'time'"
            v-model="dataForm[item.title]"
            @input="handleValue">
          </el-time-select>

          <!-- 日期时间输入项 -->
          <el-date-picker
            v-else-if="item.type === 'datetime'"
            v-model="dataForm[item.title]"
            type="datetime"
            value-format="yyyy-MM-dd hh:mm:ss"
            @input="handleValue">
          </el-date-picker>

          <!-- 起止时间输入项 -->
          <el-date-picker
            v-else-if="item.type === 'daterange'"
            v-model="dataForm[item.title]"
            type="daterange"
            :start-placeholder="i18n('common.start_time')"
            :end-placeholder="i18n('common.end_time')"
            value-format="yyyy-MM-dd"
            @input="handleValue">
          </el-date-picker>

          <!-- 上传输入框 -->
          <el-upload
            v-else-if="item.type === 'upload'"
            class="avatar-uploader"
            :action="$http.adornUrl('/file/data')"
            :show-file-list="false"
            :headers="upload_headers"
            :on-success="handleDataSuccess"
            :before-upload="beforePictureUpload"
            @input="handleValue"
            :data="item">
            <img v-if="dataForm[item.title]" :id="item.title" :src="dataForm[item.title]" class="avatar-upload"/>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-col>
        <el-col :span="12">
          <span class="red">{{ item.content }}</span>
        </el-col>
      </el-row>
    </el-form-item>

    <!--留一个插槽-->
    <slot></slot>

    <el-form-item>
      <el-button type="primary" @click="dataFormSubmit(formRef)">
        {{ i18n('common.confirm') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="form-component">
  import { useBase } from "@/hooks/base/useBase"
  import { useForm } from "@/hooks/form/useForm"
  import { useUpload } from "@/hooks/upload/useUpload"

  const { router, i18n, isAuth } = useBase()
  const {proxy: { $forceUpdate }} = getCurrentInstance();

  const formItemList = ref([])
  const dataForm = reactive({})
  const dataRule = reactive({})

  const props = defineProps({
    category_id: {
      type: Number,
      required: true
    }
  })

  const {
    formRef,
    resetForm
  } = useForm('', dataForm)

  const {
    upload_headers,
    handleDataSuccess,
    beforePictureUpload,
  } = useUpload(dataForm, '')

  const init = (form) => {
    nextTick(() => {
      form.value.resetFields()
      $http({
        url: $http.adornUrl(`/config/select`),
        method: 'get',
        params: $http.adornParams({
          category_id: props.category_id,
        }),
      }).then(({ data }) => {
        if (data && data.status === 200) {
          formItemList.value = data.data

          formItemList.value.forEach(({ title, value, type }) => {
            if ('radio' == type && typeof value != 'string') {
              dataForm[title] = parseInt(value)
            } else {
              dataForm[title] = value
            }
          })
        }
      })
    })
  }

  // 表单提交
  const dataFormSubmit = (form) => {
    form.validate(async (valid, fields) => {
      if (valid) {
        $http({
          url: $http.adornUrl('/setting/data'),
          method: 'post',
          data: $http.adornData(dataForm),
        }).then(({ data }) => {
          if (data && data.status === 200) {
            $message.success(i18n('common.handle_success'))
            router.go(-1)
          } else {
            $message.error(data.message)
          }
        })
      }
    })
  }

  const handleValue = (e) => {
    $forceUpdate()
  }

  onMounted(() => {
    init(formRef)
  })
</script>

<style lang="scss" scoped>
  .el-row {
    width: 100%;
  }
</style>
